<template>
  <div>
    <h2>按照节点查询</h2>
    <div class="searchn">
  <!-- <label >按照节点查询</label> -->
  <el-select style="margin=5px" v-model="link_by_node" placeholder="请选择节点">
    <el-option v-for="role in roles" :key="role" :label="role" :value="role"></el-option>
  </el-select>

  <br>
  <br>
  <!-- <p>您要查询的是: {{link_by_node}}</p> -->
  <button class="buttom" @click="sendNodeToBackend">SEARCH</button>
    </div>
    <div class="chart_node" id="node"></div>
  </div>
</template>

<script>
import api from "@/api";
import * as echarts from 'echarts';
  export default{
    data() {
    return {
      nodeshow:"",
      link_by_node:"", // 存放选择的角色字符串的变量
      roles: [] // 下拉框的选项数组
    };
},
mounted(){

 // this.fetchLinkByName(this.link_by_name);
  this.get_all_node_type();
},
methods:{
  async get_all_node_type(){
    try {
      const node_type = await api.post('/get_all_node_type');
      this.roles = node_type;
      console.log('node_type Response:',this.roles);
      // Handle the API response as needed
    } catch (error) {
      console.error('Error:', error);
      // Handle the error
    }

  },


 async sendNodeToBackend(){
  console.log(this.link_by_node);
    try {
      const response = await api.post('/query_nodes?node_name='+this.link_by_node);
      this.nodeshow = response.names;
      //处理传来的json数据
      console.log('API Response:',this.nodeshow);

      this. shownode(this.nodeshow);
      // this.showcharts();

      // Handle the API response as needed
    } catch (error) {
      console.error('Error:', error);
      // Handle the error
    }
  //   async fetchLinkByName(name) {
  //   try {
  //     const response = await api.getLinkByName(name);
  //     this.linkname = response.data; // 假设服务器返回一个名为"name"的字段
  //     console.log(this.linkname);
  //   } catch (error) {
  //     console.error(error);
  //   }
  // }
},
shownode(ns){
  var chartDom = document.getElementById('node');
  var myChart = echarts.init(chartDom);
  var option;

option = {
title: {
  text: this.link_by_node,
  textStyle:{
      color:'#fff'
    }
},
tooltip: {
  borderColor: "rgba(46, 143, 213, 1)",
  formatter: function(params) {
    if (params.data) {
      let tooltipContent = params.data.name; // 获取节点名称
      let pro = "性 质 : "+params.data.property;
      if (params.data.property) {
        tooltipContent += '<br>' + pro; // 添加节点的property内容
      }
      return tooltipContent;
    }
  },
  textStyle:{
    fontWeight: "bolder",
    width: 10
  },
  trigger: "item"
},

animationDurationUpdate: 1500,
animationEasingUpdate: 'quinticInOut',
series: [
  {
    type: 'graph',
    layout: 'force',
    symbolSize: 50,
    roam: true,
    label: {
      show: true
    },
    edgeSymbol: ['circle', 'arrow'],
    edgeSymbolSize: [4, 10],
    force: {
      repulsion: 1000
    },
    textStyle:{
          fontFamily: "Courier New",
          color:'#fff',
          fontWeight: "bolder"
      },
    itemStyle: {
        shadowBlur: 5
      },
    edgeLabel: {
      fontSize: 20
    },
    data: ns
  }
]
};

option && myChart.setOption(option);
}
}

  }
</script>

<style>

.chart_node{
  /* top: 1rem; */
 
  /* padding:  0.125rem; */
  margin: 0.1rem;
  width: 450px;
  height: 650px;     
  }
  .buttom{
    border: 1px  ;
      border-radius: 5px;
      width: 90px;
      height: 30px;
    
    background-color: #fff;

  }
  .searchn{
    font-size: medium;
    text-align: center;
    line-height: 40px;
    color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: bolder;
    font-family:serif;
    letter-spacing: 5px;
  }
h2{
  height: 1rem;
  color: aliceblue;
  margin: 5px;
  font-size: 30px;
  text-align: center;
}

</style>